import { useEffect, useState } from 'react'
import SelectGoods from '../../components/SelectGoods'
import { interfacesGoods } from '../../interfaces/goods'
import './index.scss'
import { useSearchParams } from 'react-router-dom'
import { formatDuration } from '../../utils/time'
import { message } from 'antd'

function InviteFriend() {
  const [params] = useSearchParams()
  const id = params.get('id')

  useEffect(() => {
    if (id) getBoostInfo(id);

    return () => {
      clearInterval(countInterval);
    }
  }, [id])

  // 获取boost信息
  const [boostInfo, setBoostInfo] = useState()
  const getBoostInfo = (id) => {
    const params = {
      order_no: id
    }
    interfacesGoods.getBoostInfo(params).then(res => {
      setBoostInfo(res.data);
      getCountDown(res.data.activity.remain_secs);
    })
  }

  // 倒计时
  const [countDown, setCountDown] = useState('');
  let countInterval;
  const getCountDown = (count) => {
    
    countInterval = setInterval(() => {
      setCountDown(formatDuration(count--));
      if (count < 0) clearInterval(countInterval);
    }, 1000)
  }

  // 助力
  const boost = () => {
    const params = {
      order_no: id
    }
    interfacesGoods.boost(params).then(res => {
      message.success('boost success')
    })
  }

  const onSelectGoodsHandle = () => {

  }

  return (
    <div className='invite-friend'>
      <div className='title'>Whispers in the Air, WISP Everywhere.</div>
      <div className='top'>
        <div className='top-item'>Asfd…ADSF+124</div>
        <div className='top-item'>Asfd…ADSF+124</div>
        <div className='top-item'>Asfd…ADSF+224</div>
        <div className='top-item'>Asfd…ADSF+1213</div>
        <div className='top-item'>Asfd…ADSF+124</div>
      </div>
      <div className='content'>
        <SelectGoods className="select-goods" goods={boostInfo} onSelectGoods={onSelectGoodsHandle}></SelectGoods>
        <div className='invite-info'>
          <div className='tip'>
            <div className='green'>I am getting more WISP<br/>e-cigarettes for free,</div>
            <div>please help me!</div>
          </div>
          <div className='precent'>Free increase of <span className='green'>{boostInfo?.activity.boost_progress}% {boostInfo?.activity.reward_number}</span><br/>units in total</div>
          <div className='btn' onClick={boost}><div className='strong'>Boost dosage</div>remaining {countDown}</div>
        </div>
      </div>
      <div className='bottom-box'></div>
    </div>
  )
}

export default InviteFriend